<template>
  <div class='page grey-stage team-ranking'>
    <top-filter :filterOptions="filterOptions" @change-filter="changeFilterValue" ref="topFilter"></top-filter>
    <crm-cover v-if="isShowCover" :hideOnBlur="false"></crm-cover>
    <div
    class="scroll-container"
    :style="{
      'padding-top': this.scrollerTop + 'px',
      'height': this.scrollerHeight + 'px',
      'width': this.winWidth + 'px'
    }"
    >
      <div class="no-data-tip" v-if="!rankingData.length">暂无数据</div>
      <div class="section-title" v-if="rankingData.length">本月共<i>{{ rankingData.length }}</i>个团队，按完成率排名</div>
      <team-item :time="timestamp" :class="{'section-style': index > 0}" v-for="(value, index) in rankingData" :key="index" :values="value"></team-item>
    </div>
    <crm-tabbar v-if="!isAppMode" activeItem='workbench' ref="tabbar"></crm-tabbar>
  </div>
</template>

<script>
import crmTabbar from '../components/crm-tabbar'
import topFilter from '../components/top-filter'
import TeamItem from '../components/ranking/team-item'

import Q from 'q'
import crmCover from '../components/crm-cover'
import { mapState, mapActions } from 'vuex'

import { timeOpts } from '../lib/options/time'

export default {
  data () {
    return {
      scrollerTop: '',
      scrollerHeight: '',
      winWidth: '',
      winWidth: '',
      filterData: '',
      timestamp: '',
      defaultTime: '',
      morePath: '/',
      barTitle: '我的目标',
      teamName: '',
      morePath: '/',
      dealMorePath: '/',
      rankingData: {},
      yearsCount: 3, // 可以查{ yearsCount }年的数据
      filterOptions: [],
    }
  },
  components: {
    topFilter,
    crmCover,
    crmTabbar,
    TeamItem
  },
  mounted () {
    this.defaultTime = parseInt(this.$route.query.time)
    this.initTimes(this.defaultTime)
    this.initData()
    this.$nextTick(() => {
      this.caculateScroller()
    })
  },
  watch: {
    windowSize (size) {
      this.caculateScroller()
    },
    timestamp () {
      this.rankingData = [].concat(this.rankingData)
    }
  },
  computed: {
    ...mapState({
      isShowCover: state => state.app.isShowCover,
      totalTarget: state => state.app.target,
      user: state => state.app.user,
      windowSize: state => state.app.windowSize,
      isAppMode: state => state.config.isAppMode
    })
  },
  methods: {
    initData () {
      const defaultParams = this.getDefaultParam()
      this.type = defaultParams.type
      this.timestamp = defaultParams.timestamp
      this.$getTeamRankingData({
        timestamp: this.getTimestamp(new Date(defaultParams.timestamp))
      })
    },
    initTimes (currentTime) {
      this.filterOptions = []
      const timeOpts = this.getTimeOpts(currentTime)
      this.filterOptions.push(timeOpts)
    },
    $getTeamRankingData (defaultParams) {
      this.$vux.loading.show()
      this.getTeamRankingData(defaultParams)
      .then((response) => {
        if (response.data.errcode === 0) {
          const results = response.data.results
          this.rankingData = results
          this.$vux.loading.hide()
        }
      }).catch(() => {
        this.$vux.loading.hide()
      })
    },
    changeFilterValue (filterOptions, filterData) {
      if (this.filterData !== filterData) {
        const filterDate = new Date()
        // console.log(filterData.year.value, 'filterData.year.value')
        filterDate.setFullYear(filterData.year.value)
        filterDate.setMonth(filterData.year.data[0].value - 1)

        var submitData = Object.assign({}, this.filterData, {
          'timestamp': this.getTimestamp(filterDate)
        })
        this.timestamp = filterDate.getTime()
        this.$getTeamRankingData(submitData)
        this.initTimes(filterDate.getTime())
        let originalFilterData = this.filterData
        this.filterData = submitData
      }
    },
    getDefaultParam () {
      const dateObj = new Date()
      let currentYear = dateObj.getFullYear()
      let currentMonth = dateObj.getMonth()
      let currentMonthDate = new Date(currentYear, currentMonth)
      return {
        timestamp: this.defaultTime || currentMonthDate
      }
    },
    getTimestamp(dateObject) {
      let currentYear = dateObject.getFullYear()
      let currentMonth = dateObject.getMonth()
      let currentMonthDate = new Date(currentYear, currentMonth)
      return Math.floor(currentMonthDate.getTime() / 1000)
    },
    getTimeOpts: timeOpts,
    caculateScroller () {
      const winHeight = window.innerHeight
      const filterHeight = this.$refs['topFilter'].$el.offsetHeight
      const tabbarHeight = this.$refs['tabbar'] ? this.$refs['tabbar'].$el.offsetHeight : 0;
      this.scrollerTop = filterHeight || 42
      this.scrollerHeight = winHeight - filterHeight
      if (!this.isAppMode) {
        this.scrollerHeight = this.scrollerHeight - tabbarHeight
      }
      this.winWidth = window.innerWidth;
    },
    ...mapActions({
      getTeamRankingData: 'getTeamRankingData'
    })
  },

}
</script>

<style lang="less">
.team-ranking {
  .target-title {
    margin-top: 42px;
    padding: 15px;
    text-align: center;
  }

  .section-style {
    margin-top: 15px;
    background-color: white;
  }

  .scroll-container {
    padding-bottom: 52px;
  }

  .business-wrapper {

  }

  .section-title {
    color: #999999;
    margin: 10px 0;
    padding-left: 15px;

    i {
      color: black;
      font-style: normal;
    }
  }

}
</style>
